<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>待办信息</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row>
      <a-col :span="6">
        是否已读:
        <a-select
          v-model="queryForm.isRead"
          placeholder="请选择信息状态"
          style="margin-left: 10px;width:70%;"
        >
          <a-select-option
            v-for="item in msgStatusList"
            :key="item.name"
            :value="item.value"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="9">
        时间范围：
        <a-range-picker
          v-model="creationDateRange"
          :placeholder="['开始日期', '结束日期']"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :show-time="{
            hideDisabledOptions: true,
            defaultValue: [
              moment('00:00:00', 'HH:mm:ss'),
              moment('23:59:59', 'HH:mm:ss'),
            ],
          }"
          format="YYYY-MM-DD HH:mm:ss"
          @change="changeDate"
        />
      </a-col>
      <a-col :span="6" style="margin-left:20px;">
        <a-button type="primary" @click="search"> 搜索 </a-button>&emsp;&nbsp;
        <a-button @click="handleReset">重置</a-button>
      </a-col>
    </a-row>
    <a-spin :spinning="loading">
      <a-row>
        <a-col :span="24">
          <a-table
            :scroll="{ x: 1000 }"
            :columns="columns"
            :data-source="tableData"
            :pagination="false"
            >
            
            <!-- 内容 -->
            <template slot="context" slot-scope="text, record">
                <span>{{ fnText(text)[0] }}</span>
                <span class="eventId-cell" @click="handleOperation(record, 'Detail')">{{ fnText(text)[1] }}</span>
                <span>{{ fnText(text)[2] }}</span>
                <span>{{ fnText(text)[3] == '请在null前处理' ? '请立即处理' : fnText(text)[3] == 'undefine' ? '' : fnText(text)[3] }}</span>
                <span  @click="handleOperation(record, 'Detail')">{{ fnText(text)[4] == 'undefine' ? '' : fnText(text)[4] }}</span>
            </template>
            <!-- 操作列 -->
            <template slot="operation" slot-scope="text, record">
                <a-space>
                <a class="blue" @click="detailFn(record.id)">标记为已读</a>
                </a-space>
            </template>
            </a-table>
            <div class="page_box">
            <a-pagination
                v-model="queryForm.offset"
                :page-size-options="['20', '30', '40', '50']"
                :total="total"
                show-size-changer
                :page-size="queryForm.current"
                @showSizeChange="onShowSizeChange"
                @change="pageChange"
                :show-total="(total) => `共 ${total} 条`"
            ></a-pagination>
            </div>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>
<script>
import { message, Modal } from "ant-design-vue";
import dayjs from "dayjs";
import moment from "moment";
import qs from "qs";
import dictMixin from "@/mixins/dictMixin";
export default {
  mixins: [dictMixin],
  data() {
    return {
      total: 0,
      tableData: [],
      pageInfo: {},
      columns: [
        {
          title: "消息ID",
          dataIndex: "id",
          key: "id",
          width:159,
          
        },
        {
          title: "消息状态",
          dataIndex: "isRead",
          key: "isRead",
          width:80,
          customRender: (text, record, index) => {
            console.log(text);
            return text == 1 ? '已读' : '未读'
          },
        },
        {
          title: "标题",
          dataIndex: "title",
          key: "title",
        },
        {
          title: "消息内容",
          dataIndex: "context",
          key: "context",
          scopedSlots: { customRender: "context" },

        },
        {
          title: "消息时间",
          dataIndex: "eventStatus",
          key: "eventStatus",
          width: 150
        },
        
        {
          title: "操作",
          key: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      loading: true,
      creationDateRange: ['2024-01-01 00:00:00' ,'2025-01-01 23:59:59'],
      msgStatusList:[{name:'未读',value:0},{name:'已读',value:1}],
      queryForm: {
        current: 20,
        offset: 1,
        isRead: 0,
        startTime:'',
        endTime:''
      },
      
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    moment,
    // 分页
    onShowSizeChange(current, pageSize) {
      // console.log('-----',offset)
      this.queryForm.offset = current;
      this.queryForm.current = pageSize;
      this.getList()

    },
    pageChange(current) {
      this.queryForm.offset = current;
      this.getList()
     
    },
    changeDate(val) {
      this.queryForm.startTime = val[0];
      this.queryForm.endTime = val[1];
    },
    
    handleReset() {
      this.queryForm = {
        current: 20,
        offset: 1,
        issueSource: null,
        relatedObjectId: null,
        issueType: null,
        urgencyLevel: null,
        eventStatus: null,
        startTime: null,
        endTime: null,
        flag: null,
      };
      this.creationDateRange = [];
      if (this.tabsValue) {
        this.getList();
      } else {
        this.getAllList();
      }
      // this.getList()
    },

    search() {
      this.queryForm.offset = 1;
      
      this.getList();

    },
    getList() {
      this.loading = true;
      this.queryForm.startTime = this.creationDateRange[0];
      this.queryForm.endTime = this.creationDateRange[1];
      const url = "/government-platform-center/leader/getPublicMsg";
      this.$axios
        .post(url, this.queryForm, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.tableData = res.data.data || [];
            this.total = res.data.total;
            this.loading = false;
          }
        });
    },
    detailFn(id,index='') {
      const url = "/government-platform-center/leader/setRead";
      this.$axios.post(url, {isRead:1,msgId:id}, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((res) => {
          if(!index){
            this.search();

          }
        });
    },
    fnText(text){
      // console.log('需要处理的字段',text)
      // let text= "被驳回的案件编号为：case_15427577173, 案件问题来源为【指】微信, 案件问题类型为其他, 请在2024前处理，点击此处立即处理";

      // 第一步：匹配案件编号
      const caseRegex = /(case_\d+)/;
      const caseParts = text.split(caseRegex);

      // 第二步：在剩余部分匹配"请在null前处理"
      const nullRegex = /(请在null前处理)/;
      const finalParts = caseParts[2].split(nullRegex);
      // console.log('处理后的字段',caseParts[0])

      // 第三步：构造结果数组并优化格式
      const result = [
        caseParts[0], // 第一部分
        caseParts[1],        // 案件编号
        // ---------------------
        finalParts[0]
          .replace(/^\s*,\s*/, ",")  // 处理开头的逗号
          .replace(/,\s*$/, ","),     // 处理结尾的逗号
        finalParts[1],       // "请在null前处理"
        finalParts[2] // 最后部分
      ];
      // console.log('处理后的字段',result)

      return result;
      // result[2] == undefined ? { one : result[0], two : result[1],  tri : result[2]}:{
      //       one : result[0],
      //       two : result[1],
      //       tri : result[2],
      //       fo : result[3],
      //       fri : result[4],
      //     };
      // console.log('处理后的字段',result)

    },
    handleOperation(row, type) {
      // 实现查看详情逻辑
      console.log('点击',row, type)
      this.detailFn(row.id,1);//标记为已读
      this.$router.push({
        path: "/control/daibanDetail",
        query: {
          id: row.param,
          operationType: type,
          pageType: 'wdrw', //'this.pageType,
        },
      });
    },
  },
 
};
</script>
<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

::v-deep .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

::v-deep .ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

/* 添加表格原生滚动条样式 */
::v-deep .ant-table-body {
  overflow-x: auto !important;
  /* overflow-y: auto !important; */
  /* max-height: 500px; 设置最大高度，超出时显示垂直滚动条 */
}

/* 确保使用原生滚动条样式 */
::v-deep .ant-table-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::v-deep .ant-table-body::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

::v-deep .ant-table-body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 修复固定列的问题 */
::v-deep .ant-table-fixed-right {
  right: 0px; /* 为滚动条留出空间 */
}
.eventId-cell {
  color: #1890ff;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}
</style>
